<!-- 返回值节点 -->
<template>
  <CoolDialog v-model="showDialog" width="30vw" @close="close">
    <el-form
      :model="nodeConfigFrom"
      label-width="80px"
      ref="nodeConfigFormRef"
      :rules="rules"
    >
      <el-form-item :label="langMsg?.nodename || '节点名称'" prop="nodeName">
        <el-input
          v-model="nodeConfigFrom.nodeName"
          placeholder="请输入节点名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="返回值" prop="returnParams">
        <el-row
          :gutter="3"
          v-for="(param, index) in nodeConfigFrom.returnParams"
          :key="index"
          style="margin-bottom: 15px"
        >
          <el-col :span="12">
            <el-form-item :prop="`returnParams.${index}.key`">
              <el-input
                v-model="param.key"
                :placeholder="langMsg?.keyword || '关键字'"
              /> </el-form-item
          ></el-col>
          <el-col :span="10">
            <el-form-item :prop="`returnParams.${index}.value`">
              <el-input
                v-model="param.value"
                :placeholder="langMsg?.value || '值'"
              /> </el-form-item
          ></el-col>
          <el-col :span="2">
            <div
              style="
                height: 100%;
                line-height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <el-icon :size="20" @click="nodeConfigFrom.returnParams.splice(index, 1)">
                <CircleClose />
              </el-icon>
            </div>
          </el-col>
        </el-row>

        <div
          style="display: flex; width: 100%; justify-content: center; align-items: center"
        >
          <el-icon class="add-params" @click="addParams">
            <Plus />
          </el-icon>
        </div>
      </el-form-item>
    </el-form>
    <div style="margin-top: 30px; text-align: center">
      <el-button @click="onSaveAndBind(nodeConfigFormRef)">确定</el-button>
      <el-button @click="close">{{ langMsg?.cancel || "取消" }}</el-button>
    </div>
  </CoolDialog>
</template>
<script setup lang="ts">
import { Plus, CircleClose } from "@element-plus/icons-vue";
// import { getChainNodeDetail} from '@/api/RuleEngine'
import CoolDialog from "@/components/CoolDialog.vue";
import { inject, onMounted, onUnmounted, reactive, ref } from "vue";
import { nodeTypeEnum } from "../const";
const props = defineProps({
  modelValue: { type: String, default: "0" },
  clickNodeInfo: { type: Object, default: {} },
});
const emits = defineEmits(["update:modelValue", "delete", "saveConfiguration"]);
const apis: any = inject("apis");
const langMsg:any = inject("langMsg");
const showDialog = ref(false);
interface node {
  id?: string;
  nodeName?: string;
  type?: string;
  nodeExtend?: string;
  key?: string;
  value?: string;
  returnParams?: Array<Returnparam>;
}
interface Returnparam {
  key?: string;
  value?: string;
}
const nodeConfigFormRef = ref();
const rules = reactive({
  nodeName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  returnParams: [{ required: true, message: "请输入返回值", trigger: "blur" }],
});
const nodeConfigFrom: any = ref<node>({ returnParams: [] });
const addParams = () => {
  nodeConfigFrom.value.returnParams = [{}, ...nodeConfigFrom.value.returnParams];
};

const onSaveAndBind = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      emits("saveConfiguration", {
        ...nodeConfigFrom.value,
        type: nodeTypeEnum.backValNode,
        configuration: JSON.stringify({
          returnParams: nodeConfigFrom.value.returnParams,
        }),
      });
      reset();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const reset = () => {
  nodeConfigFrom.value = { returnParams: [] };
  showDialog.value = false;
  emits("update:modelValue", 0);
};
const close = () => {
  reset();
  if (!props.clickNodeInfo.id) emits("delete");
};
onMounted(async () => {
  let data: any = {};
  if (props.clickNodeInfo.id) {
    let res = await apis?.getChainNodeDetail(props.clickNodeInfo.id);
    data = res.data.data || {};
  }
  nodeConfigFrom.value = { returnParams: [], ...data };
  showDialog.value = true;
});
onUnmounted(() => {
  reset();
});
</script>
<style scoped></style>
